@import '~@src/common/less/color.less';
@import url('~@src/common/less/button.less');

body {
    background-color: #f2f3f5;
}

.page {
    .config_top {
        background: #fff;
        padding: .8rem .75rem;

        .config_top_up {
            .config_top_left {
                font-size: .85rem;
                color: #FF6500;
            }

            .config_top_right {
                display: flex;
                align-items: center;
                font-size: .65rem;
                color: #1790FC;
            }
        }

        .config_top_bottom {
            margin-top: .75rem;
            font-size: .75rem;
            color: #91959E;

            span {
                font-size: .6rem;
            }
        }
    }

    .content {
        margin-top: .5rem;
        background: #F9F7F6;
        padding: .8rem .75rem;

        .content_gold {
            margin-top: .5rem;
            font-size: .65rem;
        }

        .content_title_text {
            font-weight: 500;
            font-size: .75rem;
            color: #1D212B;
        }



        .content_gold_left {
            width: 45%;
            color: #91959E;

            span {
                color: #FF6500;
            }
        }

        .content_gold_right {
            width: 10%;
            text-align: right;
            color: #1790FC;
        }

    }

    .list {
        background: #fff;
        .list_title {
            padding: .6rem .75rem;
            font-size: .6rem;
            color: #91959E;
            border-bottom: 0.0125rem solid #E8E9EB;
        }

        .list_left {
            width: 60%;

            p {
                width: 7.1rem;
                text-align: justify;
                font-size: .7rem;
                line-height: 1rem;
                color: #666687;
            }
        }

        .list_center {
            width: 30%;
        }

        .list_right {
            width: 10%;
        }
        .hidden{
            visibility: hidden;
        }

        .list_content {
            padding: 0 .75rem;
        }

        .list_list {
            padding: .6rem 0;
            border-bottom: 0.0125rem solid #E8E9EB;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }

        .list_input {
            width: 3rem;
            height: 1.1rem;
            background: #F0F5FC;
            border-radius: .1rem;
            padding: 0 .2rem;
            font-size: .6rem;
        }

        .list_add {
            font-size: .7rem;
            color: #5BA0F0;
            padding: 1rem 0;
            div{
              width: 5rem;
              margin: 0 auto;
              text-align: center;
            }
        }
    }

    // .content_title_icon {
    //     display: block;
    //     width: .65rem;
    //     height: .4rem;
    //     background: chartreuse;
    // }

    .content_title,
    .content_gold,
    .config_top_up,
    .list_title ,
    .produck_content{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .bg.active{
        bottom:0;
        transition: all .3s;
    }
    .bg{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.50);
        position: fixed;
        // top: 0;
        left: 0;
        right: 0;
        bottom: -100%;
        transition: all .3s;
        .add_produck{
            z-index: 999;
            width: 100%;
            // height: 25.2rem;
            background: #fff;
            position: absolute;
            bottom: 0;
            border-radius: .2rem .2rem 0 0;
            .produck_out{
                height: 15.1rem;
                
                overflow-x: hidden;
                .produck{
                    padding: .55rem .75rem .4rem .75rem;
                    position: relative;
                    .produck_title{
                        font-size: .55rem;
                        color: #545861;
                        span{
                            color: #FF6500;
                            vertical-align: baseline;
                        }
                    }
                    .produck_content{
                        height: 1.65rem;
                        margin-top: .4rem;
                        background:#F5F6FA;
                        padding: 0 1rem;
                        font-size: .6rem;
                        color: #91959E;
                       div {
                           width: 50%;
                       }
                    } 
                }
                .produck::after{
                    content: '';
                    display: block;
                    border-top: 0.0125rem solid #e7e7e7;
                    width: 17.25rem;
                    position: absolute;
                    bottom: 0;
                }
                .produck_noclick{
                    background:#F2F3F5
                }
            }
        }
    }

}
